<template>
    <div class="cart">
        <el-table
            :data="showList"
            style="width: 100%">
            <el-table-column
                label="姓名/id">
                <template slot-scope="scope">
                    <p>{{ scope.row.name }}</p>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="checkCart(scope.row)">
                        查看购物车
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[1, 4, 5, 10]"
                :page-size="currentSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import {mapState} from "vuex"
export default{
    name:"Cart",
    created(){
        this.getUserList()
    },
    data(){
        return {
            userList:[],
            currentPage:1,
            currentSize:4,
            showList:[]
        }
    },
    methods:{
        async getUserList(){
            let res = await this.axios.post("http://api_devs.wanxikeji.cn/api/admin/userList",{
                token:this.token,
                size:100
            })
            for(let i=0;i<res.data.data.data.length;i++){
                // console.log()
                if(!res.data.data.data[i].user_account&&!res.data.data.data[i].nick_name){
                    res.data.data.data[i].name = res.data.data.data[i].user_id
                }else if(res.data.data.data[i].nick_name==null){
                    res.data.data.data[i].name=res.data.data.data[i].user_account
                }else if(res.data.data.data[i].user_account==null){
                    res.data.data.data[i].name=res.data.data.data[i].nick_name
                }else{
                    res.data.data.data[i].name=res.data.data.data[i].nick_name
                }
                
                
            }
            // console.log(res.data.data.data)
            this.userList = res.data.data.data
            this.renderList()
        },
        renderList(){
            let arr=[]
            let startIdx = (this.currentPage-1)*this.currentSize
            let endIdx = this.currentPage*this.currentSize
            if(endIdx>this.userList.length){
                endIdx = this.userList.length
            }
            for(let i=startIdx;i<endIdx;i++){
                arr.push(this.userList[i])
            }
            this.showList = arr
        },
        handleSizeChange(size){
            this.currentSize = size
            this.renderList()
        },
        handleCurrentChange(page){
            this.currentPage = page
            this.renderList()
        },
        checkCart(row){
            const {user_id,token} = row
            this.$router.push({
                path:`/home/cart/${user_id}`,
                query:{token}
            })
        }
    },
    computed:{
        ...mapState(["token"]),
        total(){
            return this.userList.length
        }
    }
}
</script>
<style scoped>
.home{
    display: block;
}
.cart{
    margin-top:20px
}
.el-pagination{
    margin-top:20px
}
.cell{
    text-align: center;
}
</style>
